<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div></div>
    <p class="pp" index="hehe" id="p" ></p>


    <!-- <input type="text" disabled>
    <input type="checkbox" checked> -->


    <script>

        var oDiv = document.querySelector('div') ;
        // oDiv 是一个标签

        // 动态添加  只能给已存在的属性
        oDiv.id = 'a' ;
        oDiv.className = 'b' ;

        // 把div当成js对象来看   所以index属性在标签上看不见
        oDiv.index = 1 ;






        // 标签的属性操作
        //    attributes 获取标签上是所有的属性   对象
        //    获取属性  getAttribute()
        //    设置属性  setAttribute(属性名,属性值)
        //    删除属性  removeAttribute(属性名)

        //  注意
        //    标签的自有属性有两种访问方法
        //       1 getAttribute('id') 
        //       2 oP.id

        //    标签上的自定义属性只能通过一种方式 getAttribute('qq') 



        var oP = document.querySelector('p') ;
        // console.log(oP.attributes);
        // console.log(oP.attributes[2]);


        console.log(oP.getAttribute('id'));
        console.log(oP.getAttribute('index'));
        console.log(oP.getAttribute('class'));
        oP.setAttribute('qq' , 'haha') ;

        oP.removeAttribute('index') ;


        // 只有标签的自有属性才可以简写   id  class   src   href   target    disabled   checked
        console.log(oP.getAttribute('id'));
        console.log(oP.id);


        // console.log(oP.index);  // 对象的自定义属性


    </script>
    
</body>
</html>